<template>
    <h2 style="padding-left: 350px;">增加人员</h2>
    <el-form :model="form" label-width="auto" style="max-width: 800px" :rules="rules">
        <span>基本信息</span>
        <hr style="color: black;">
        <br>
        <table>
            <tr>
                <td>
                    <el-form-item label="姓名" prop="userMyName">
                        <el-input v-model="form.userMyName" style="width:300px"/>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.userSex" >
                            <el-radio :value="true">男</el-radio>
                            <el-radio :value="false">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="证件类型" >
                        <el-select v-model="form.idCarId" placeholder="请选择">
                            <el-option v-for="item in idCardsList" :label="item.idCardType" :value="item.idCarId" />
                        </el-select>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item>
                        <el-input v-model="form.userIDCard" style="width:370px" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="联系电话" prop="userPhone">
                        <el-input v-model="form.userPhone" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="电子邮箱" prop="userElect">
                        <el-input v-model="form.userElect" style="width:300px"/>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="毕业院校" prop="userCollage">
                        <el-input v-model="form.userCollage" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="学历">
                        <el-select v-model="form.studyId" placeholder="请选择">
                            <el-option v-for="item in StudiesList" :label="item.studyName" :value="item.studyId" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
        </table>
        入职信息
        <hr style="color: black;">
        <br>
        <table>
            <tr>
                <td>
                    <el-form-item label="单位">
                        <el-select v-model="form.unitId" placeholder="请选择" style="width:300px">
                            <el-option v-for="item in UnitsList" :label="item.unitName" :value="item.unitId" />
                        </el-select>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="员工状态">
                        <el-select v-model="form.employeeId" placeholder="请选择" style="width:300px">
                            <el-option v-for="item in EmployeesList" :label="item.employeeName" :value="item.employeeId" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="部门">
                        <el-select v-model="form.epartmentId" placeholder="请选择">
                            <el-option v-for="item in EpartmentsList" :label="item.epartmentName" :value="item.epartmentId" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="入职日期">
                        <el-col :span="11" >
                            <el-date-picker v-model="form.entryDate" type="date" placeholder="请选择入职日期"
                                style="width: 300px" />
                        </el-col>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="转正日期">
                        <el-col :span="11">
                            <el-date-picker v-model="form.transferDate" type="date" placeholder="请输入转正日期"
                                style="width: 300px" />
                        </el-col>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="职务" prop="position">
                        <el-input v-model="form.position" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="岗位" prop="post">
                        <el-input v-model="form.post" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="人事级别" prop="personnel">
                        <el-input v-model="form.personnel" />
                    </el-form-item>
                </td>
            </tr>
        </table>
        账号信息
        <hr style="color: black;">
        <br>
        <table>
            <tr>
                <td>
                    <el-form-item label="账号" prop="userName">
                        <el-input v-model="form.userName" style="width:300px"/>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="密码" prop="userPwd">
                        <el-input type="password" v-model="form.userPwd" style="width:300px"/>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="角色">
                        <el-select v-model="form.rolesId" placeholder="请选择">
                            <el-option v-for="item in roles" :label="item.rolesName" :value="item.rolesId" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
        </table>
        <el-form-item>
            <el-button style="margin-left: 350px;width:100px" type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();

onMounted(()=>{
    GetidCard();//证件类型
    GetStudies();//学历
    GetUnits();//单位
    GetEmployees();//员工状态
    GetEpartments();//部门
    handleRoleAll();//角色
})
//用户添加信息
const form = reactive({
    userName: '',
    userPwd: '',
    userMyName: '',
    userSex: '',
    idCarId: '',
    userIDCard: '',
    userPhone: '',
    userCollage: '',
    userElect: '',
    studyId: '',
    unitId: '',
    employeeId: '',
    epartmentId: '',
    entryDate: '',
    transferDate: '',
    position: '',
    post: '',
    personnel: '',
    rolesId: '',
    isUser: false,
})
// 定义验证规则
const rules = reactive({
    userMyName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    userPhone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^[1][3-9]\d{9}$/, message: '请输入有效的联系电话', trigger: 'blur' }
    ],
    userElect: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入有效的电子邮箱', trigger: 'blur' }
    ],
    userCollage: [{ required: true, message: '请输入学院', trigger: 'blur' }],
    position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
    post: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
    personnel: [{ required: true, message: '请输入人员信息', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    userPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        {
            pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{6,}$/,
            message: '密码必须包含字母和数字，且不能小于6位数',
            trigger: 'blur'
        }
    ]
});
//用户信息添加
const onSubmit = () => {
    if(form.entryDate>=form.transferDate)
    {
        ElMessage.error('转正日期不能大于入职日期');
        return;
    }
    axios.post(apiUrl+'/api/Users/AddUsers',form)
    .then(res=>{
        if(res.data.code==0)
        {
            console.log("用户添加",res.data);
            ElMessage.success('用户信息添加成功');
            router.push('/QueryUserList');
        }
        else{
            ElMessage.error('用户信息添加失败');
            return;
        }
    })
}

//证件类型列表
const idCardsList=ref([]);
const GetidCard=()=>{
    axios.post(apiUrl+'/api/Users/GetIDCards',{})
    .then(res=>{
        console.log("证件类型",res.data.data);
        idCardsList.value = res.data.data;
    })
}

//获取学历列表
const StudiesList=ref([]);
const GetStudies=()=>{
    axios.post(apiUrl+'/api/Users/GetStudies',{})
    .then(res=>{
        console.log("学历列表",res.data.data);
        StudiesList.value = res.data.data;
    })
}

//获取单位列表
const UnitsList=ref([]);
const GetUnits=()=>{
    axios.post(apiUrl+'/api/Users/GetUnits',{})
    .then(res=>{
        console.log("单位列表",res.data.data);
        UnitsList.value = res.data.data;
    })
}

//获取员工状态列表
const EmployeesList=ref([]);
const GetEmployees=()=>{
    axios.post(apiUrl+'/api/Users/GetEmployees',{})
    .then(res=>{
        console.log("员工状态列表",res.data.data);
        EmployeesList.value = res.data.data;
    })
}

//获取部门列表
const EpartmentsList=ref([]);
const GetEpartments=()=>{
    axios.post(apiUrl+'/api/Users/GetEpartments',{})
    .then(res=>{
        console.log("部门列表",res.data.data);
        EpartmentsList.value = res.data.data;
    })
}

//角色显示
const roles:any=ref([])
const handleRoleAll = () => {
  axios.post(apiUrl+"/api/Permissions/GetAllRole", {})
    .then((res) => {
      console.log(res.data.data)
      roles.value = res.data.data;
    });
};
</script>
